<template>
  <div class="markdown">
    <!--    <MyHander></MyHander>-->
    <a-form style="width: calc(100% - 80px)">
      <a-form-item
        style="margin-top: 10px"
        label="标题"
        v-bind="validateInfos.title"
      >
        <a-input placeholder="Please input title" v-model:value="from.title" />
      </a-form-item>
      <a-form-item label="类型" v-bind="validateInfos.type">
        <a-select v-model:value="from.type" placeholder="Please select a type">
          <a-select-option value="post">文章</a-select-option>
          <a-select-option value="code">代码</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="&ensp;&ensp;标签">
        <template v-for="tag in state.tags" :key="tag">
          <a-tooltip v-if="tag.length > 20" :title="tag">
            <a-tag :closable="true" @close="handleClose(tag)">
              {{ `${tag.slice(0, 20)}...` }}
            </a-tag>
          </a-tooltip>
          <a-tag v-else :closable="true" @close="handleClose(tag)">
            {{ tag }}
          </a-tag>
        </template>
        <a-input
          v-if="state.inputVisible"
          ref="inputRef"
          v-model:value="state.inputValue"
          type="text"
          size="small"
          :style="{ width: '78px' }"
          @blur="handleInputConfirm"
          @keyup.enter="handleInputConfirm"
        />
        <a-tag
          v-else
          style="background: #fff; border-style: dashed"
          @click="showInput"
        >
          <plus-outlined />
          new Tag
        </a-tag>
      </a-form-item>
    </a-form>

    <v-md-editor
      v-model="submitParams.content"
      left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code"
      height="calc(100vh - 250px)"
    ></v-md-editor>
<!--    <MdEditor v-model="submitParams.content" />-->
<!--      toolbarsExclude="['link','mermaid','katex','github']"-->

    <!--      @onUploadImg="onUploadImg"-->
<!--      @onSave="codeSave"-->
<!--    <MdEditor v-model="submitParams.content" height="calc(100vh - 250px)" />-->

    <div class="submitButton">
      <a-button sy type="primary" @click.prevent="onSubmit">Create</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { Form, message } from "ant-design-vue";
import myAxios from "@/plugins/myAxios";
import router from "@/router";
// import { MdEditor } from 'md-editor-v3';
// import 'md-editor-v3/lib/style.css';

const useForm = Form.useForm;

const submitParams = {
  title: "排序",
  content: "```java\n# 写下此刻所想\n```",
  // content:'',
  tags: [],
};
const from = reactive({
  title: undefined,
  type: undefined,
});
const rulesRef = reactive({
  title: [
    {
      required: true,
      message: "Please input code name",
    },
  ],
  type: [
    {
      required: true,
      message: "Please select region",
    },
  ],
});

const { validate, validateInfos } = useForm(from, rulesRef);
const inputRef = ref();
const state = reactive({
  tags: [],
  inputVisible: false,
  inputValue: "",
});
const handleClose = (removedTag: string) => {
  const tags = state.tags.filter((tag) => tag !== removedTag);
  state.tags = tags;
};
const showInput = () => {
  state.inputVisible = true;
  nextTick(() => {
    inputRef.value.focus();
  });
};
const handleInputConfirm = () => {
  const inputValue = state.inputValue;
  let tags: never[] = state.tags;
  if (inputValue && tags.indexOf(inputValue) === -1) {
    tags = [...tags, inputValue];
  }
  Object.assign(state, {
    tags,
    inputVisible: false,
    inputValue: "",
  });
};
const onSubmit = () => {
  validate()
    .then(() => {
      loadTypeData(from);
    })
    .catch(() => {
      if (from.type == undefined) message.warning("请将类型补充完整");
      else if (from.title == undefined || from.title == "")
        message.warning("请将标题补充完整");
      else message.warning("请将标题及类型补充完整");
    });
};
const loadTypeData = (Params: any) => {
  const type = Params.type;
  const Query = {
    ...Params,
    content: submitParams.content,
    tags: state.tags,
  };
  if (!type) {
    message.error("类型为空");
    return;
  } else if (!(type === "code" || type === "post")) {
    message.error("类型错误");
    return;
  }
  myAxios.post(`${type}/add`, Query).then((res: any) => {
    if (res == null) {
      // console.log(res);
      message.error(res);
    } else {
      message.success("提交成功");
      router.push(`/submitSuccess/${res}`);
    }
  });
};

const login = () => {
  const Query = {
    userAccount: "kkkkkba",
    userPassword: "12345678",
  };
  myAxios.post("/user/login", Query).then((res: any) => {
    if (res !== null) {
      message.success("登录成功");
    } else {
      message.success("失败");
    }
  });
};
const logout = () => {
  myAxios.post("user/logout").then((res: any) => {
    if (res == true) {
      message.success("登出成功");
    }
  });
};
</script>

<style scoped lang="less">
.markdown {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .submitButton {
    width: 90%;
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;

    .ant-btn-primary {
      width: 100px;
    }
  }
}
</style>
